<template>
    <div id="login">
        <el-card>
            <span style="color:red">{{error}}</span>
            <el-form ref="form" :model="user" label-width="80px">
                <el-form-item label="账号">
                    <el-input v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item label="记住我">
                    <el-checkbox v-model="user.rememberMe"></el-checkbox>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return {
                //登录用户数据
                user:{username:"",password:"",rememberMe:false},
                error:"" //错误信息
            }
        },
        methods:{
            //登录
            login(){
                this.axios.post("/doLogin",
                    this.qs.stringify(this.user))//qs将json格式转为表单格式
                    .then(res => {
                        console.log(res.data);
                        //判断是否返回了用户信息
                        if(res.data.username){
                            this.$router.push({path:'/index'});
                        }else{
                            this.error = res.data.msg;
                        }
                    });
            }
        }
    }
</script>

<style scoped>
    #login{
        width: 480px;
        height: 300px;
        margin: 200px auto;
    }
</style>